<template>
   <!-- 平台总览 -->
   <div class="box">
      <el-card class="box-card" shadow="always" style="margin-bottom: 20px">
         <template #header>
            <div>
               <span class="text-storng">平台总览</span>
            </div>
         </template>
         <el-row>
            <el-col :span="4" v-for="(item, index) in realTimeData" :key="index">
               <div class="real-time-item" :class="{ 'vertical-center': true }">
                  <h3 class="font-button">{{ item.data_val }}</h3>
                  <p style="margin-top: 5px;margin-bottom: 20px">{{ item.data_key }}</p>
               </div>
            </el-col>
         </el-row>
      </el-card>

      <!-- 日期范围和日期选择器 -->
      <el-row :gutter="30" style="margin-bottom: 20px; align-items: center">
         <el-col :span="6">
            <div class="date-range">
               <span class="date-label">{{ displayDateRange }}</span>
            </div>
         </el-col>
         <span style="margin-right: -20px;">时间类型：</span>
         <el-col :span="2" label="时间类型" style="margin-right: 20px;">
            <el-select placeholder="请选择时间类型" filterable style="width: 200px" :clearable="true"
               v-model="pagedata.time_type">
               <el-option v-for="item in genderdata" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
         </el-col>
         <el-col :span="8">
            <el-date-picker type="datetimerange" range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间"
               format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="selectedDates"
               :default-time="defaultTime1" style="width: 100%" />
         </el-col>
      </el-row>

      <!-- 用户总览 -->
      <el-card class="box-card" shadow="always" style="margin-bottom: 20px">
         <template #header>
            <div>
               <span class="text-storng">交易数据</span>
            </div>
         </template>
         <el-row>
            <el-col :span="3" v-for="(item, index) in userOverviewData" :key="index">
               <div class="user-overview-item" :class="{ 'vertical-center': true }">
                  <h3 class="font-button">{{ item.data_val }}</h3>
                  <p>{{ item.data_key }}</p>
               </div>
            </el-col>
         </el-row>
      </el-card>

      <!-- 待处理事务 -->
      <el-card class="box-card" shadow="always">
         <template #header>
            <div>
               <span class="text-storng">礼包数据</span>
            </div>
         </template>
         <el-row>
            <el-col :span="3" v-for="(item, index) in pendingTasks" :key="index">
               <div class="user-overview-item" :class="{ 'vertical-center': true }">
                  <h3 class="font-button">{{ item.data_val }}</h3>
                  <p>{{ item.data_key }}</p>
               </div>
            </el-col>
         </el-row>
      </el-card>
   </div>

   <!-- 新增的门店数据表格 -->
   <el-card style="margin-top: 20px" shadow="always">
      <template #header>
         <div>
            <span class="text-storng">门店数据</span>
         </div>
      </template>
      <div class="store-data-container">
         <el-table :data="tabeData" stripe style="width: 100%" :max-height="screenHeight" border>
            <el-table-column prop="shop_name" label="门店名称" width="250" fixed="left"></el-table-column>
            <el-table-column prop="order_price" label="流水" width="150"></el-table-column>
            <el-table-column prop="order_num" label="总订单" width="150"></el-table-column>
            <el-table-column prop="prepaid_service_count" label="待服务" width="150"></el-table-column>
            <el-table-column prop="in_service_count" label="服务中" width="150"></el-table-column>
            <el-table-column prop="over_service_count" label="服务完成" width="150"></el-table-column>
            <el-table-column prop="over_order_count" label="订单完成" width="150"></el-table-column>
            <el-table-column prop="cancel_order_count" label="取消订单" width="150"></el-table-column>
            <el-table-column prop="abnormal_order_count" label="异常订单" width="150"></el-table-column>
            <el-table-column prop="valid_order_count" label="有效订单" width="150"></el-table-column>
            <el-table-column prop="in_shop_hardware_num" label="门店钥匙柜下单量" width="150"></el-table-column>
            <el-table-column prop="not_shop_hardware_num" label="非门店钥匙柜下单量" width="170"></el-table-column>
            <el-table-column prop="old_hardware_num" label="原钥匙柜还车单量" width="170"></el-table-column>
            <el-table-column prop="new_hardware_num" label="非原钥匙柜还车单量" width="170"></el-table-column>
            <el-table-column prop="is_rewash_order_count" label="重新有效订单" width="170"></el-table-column>
            <el-table-column prop="add_user_num" label="新增用户" width="150"></el-table-column>
            <el-table-column prop="add_car_num" label="新增车牌" width="150"></el-table-column>
            <el-table-column label="下单概览" width="180">
               <template #default="scope">
                  <div v-for="hourData in scope.row.hour_create_order" :key="hourData.hour">
                     <span><strong>{{ hourData.hour }}： </strong></span>
                     <span v-for="(otItem, otIndex) in hourData.ot" :key="otItem.name">
                        {{ otItem.name }}({{ otItem.num }})
                        <span v-if="otIndex < hourData.ot.length - 1">、</span>
                     </span>
                  </div>
               </template>
            </el-table-column>
            <el-table-column label="服务概览" width="180">
               <template #default="scope">
                  <div v-for="hourData in scope.row.hour_service_order" :key="hourData.hour">
                     <span><strong>{{ hourData.hour }}： </strong></span>
                     <span v-for="(otItem, otIndex) in hourData.ot" :key="otItem.name">
                        {{ otItem.name }}({{ otItem.num }})
                        <span v-if="otIndex < hourData.ot.length - 1">、</span>
                     </span>
                  </div>
               </template>
            </el-table-column>
         </el-table>
      </div>
   </el-card>
</template>

<script setup>
import { ref, onMounted } from "vue";
import api from "@/api/index.js";
import { ElMessage } from "element-plus";
// 平台总览数据
const realTimeData = ref([]);
// 交易数据
const userOverviewData = ref([]);
// 礼包数据
const pendingTasks = ref([]);
const defaultTime1 = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]); // '12:00:00', '08:00:00'
// 门店数据
const tabeData = ref([]);
// 日期的双向绑定去
const selectedDates = ref([]);
// 开始时间
const startDate = ref("");
// 结束时间
const endDate = ref("");
// 显示的日期范围
const displayDateRange = ref("今日数据");

const genderdata = ref([
   { id: "1", title: "下单时间" },
   { id: "2", title: "服务时间" },
])

const pagedata = ref({
   time_type: "2",
})

// 侦听器
watch(selectedDates, (newValue) => {
   if (newValue && newValue.length === 2) {
      [startDate.value, endDate.value] = newValue;
      // 更新显示的日期范围
      displayDateRange.value = `${startDate.value}至${endDate.value}`;
      // 只有当日期发生变化时才重新获取数据
      init();
   } else {
      // 当时间选择器被清空时，重置日期范围并重新获取数据
      startDate.value = "";
      endDate.value = "";
      displayDateRange.value = "";
      init();
   }
});

// 声明响应式变量
const screenHeight = ref(window.innerHeight);

// 更新屏幕高度的方法
const updateScreenHeight = () => {
   screenHeight.value = window.innerHeight - 200;
};
onMounted(() => {
   window.addEventListener("resize", updateScreenHeight);


   updateScreenHeight();
   getAllrealTimeData();
   init();
});
// 销毁前移除事件监听器
onBeforeUnmount(() => {
   window.removeEventListener("resize", updateScreenHeight);
});

// 获取平台总览数据
const getAllrealTimeData = async () => {
   const res = await api.home.getAll();

   if (res.code == 0) {
      realTimeData.value = res.data;
   }
};
// 初始化
const init = async () => {
   const time = {
      start_datetime: startDate.value,
      end_datetime: endDate.value,
      time_type: pagedata.value.time_type,
   };
   // 获取交易订单数据
   api.home.order(time).then((res) => {
      if (res.code == 0) {
         userOverviewData.value = res.data;
      } else {
         ElMessage.error(res.msg);
      }
   });
   //  获取礼包数据
   api.home.pack(time).then((res) => {
      if (res.code == 0) {
         pendingTasks.value = res.data;
      } else {
         ElMessage.error(res.msg);
      }
   });
   //  获取门店数据
   api.home.store(time).then((res) => {
      if (res.code == 0) {
         tabeData.value = res.data;
      } else {
         ElMessage.error(res.msg);
      }
   });
};

// 添加时间类型监听
watch(() => pagedata.value.time_type, (newVal) => {
   if (newVal) {
      init();
   }
});
</script>

<style scoped>
.dashboard {
   padding: 20px;
}

.card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.box-card {
   width: 100%;
}

/* .real-time-item,
.user-overview-item {
   background-color: #f5f7fa;
   border-radius: 4px;
   padding: 20px;
   text-align: center;
} */

.text-storng {
   font-weight: 700;
}

.user-overview {
   background-color: #fff;
   border-radius: 4px;
   padding: 20px;
   text-align: center;
}

.vertical-center {
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
   /* 确保容器的高度 */
}

ul {
   list-style-type: none;
   padding: 0;
}

.font-button {
   margin-bottom: 10px;
}
</style>
